<?php defined('InNcPHP') or exit('Access Invalid!');?>

<link rel="stylesheet" type="text/css" href="./resource/css/diyUpload/css/webuploader.css">
<link rel="stylesheet" href="./resource/css/diyUpload/css/demo.css">

<style>
    #img-content { margin: 10px 20px;font-size: 0; }
    #img-content li {
        display: inline-block;
        position: relative;
        height: 100px;
        width: 150px;
        border: 2px dashed #804c2e;
        margin: 0 5px 5px 0;
    }
    .img-list { width: 100%;height: 100%;vertical-align: middle; }
    .img-del {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
        border-bottom-left-radius: 50%;
        text-align: center;
        font-size: 14px;
        color: #fff;
        top: 0;
        right: 0;
        cursor: pointer;
    }
    .img-del:hover {  background-color: rgba(255,0,0,0.7); }
</style>

<div class="page">
    <div class="fixed-bar">
        <div class="item-title">
            <h3>美食</h3>
            <?php echo $output['top_link'];?>
        </div>
    </div>
    <div class="fixed-empty"></div>
    <?php echo $output['sub_link'];?>
    <table class="table tb-type2" id="prompt">
        <tbody>
        <tr class="space odd">
            <th class="nobg" colspan="12"><div class="title"><h5><?php echo $lang['nc_prompts'];?></h5><span class="arrow"></span></div></th>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>图片大小推荐: 900 * 600</li>
                </ul></td>
        </tr>
        </tbody>
    </table>

    <?php echo $output['sub_link'];?>
    <div style="clear: both;"></div>

    <!--  图片列表  -->
    <ul id="img-content">
        <?php foreach ($output['images'] as $img): ?>
            <li>
                <img class="img-list" src="<?php echo $img['img_path']; ?>" alt="IMG">
                <span class="img-del" data-img_id="<?php echo $img['img_id']; ?>">X</span>
            </li>
        <?php endforeach; ?>
    </ul>

    <!--  上传插件  -->
    <div id="uploader">
        <div class="queueList">
            <div id="dndArea" class="placeholder">
                <div id="filePicker"></div>
                <p>高版本浏览器可将照片拖到这里，单次最多可选30张</p>
            </div>
        </div>
        <div class="statusBar" style="display:none;">
            <div class="progress">
                <span class="text">0%</span>
                <span class="percentage"></span>
            </div><div class="info"></div>
            <div class="btns">
                <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
            </div>
        </div>
    </div>

</div>

<script>
    var UPLOAD_URL = 'index.php?act=food&op=photo&id=<?php echo $output['tk_id']; ?>';
    $(document).on('click', '.img-del', function () {
        var _this = $(this);
        var img_id = _this.data('img_id');
        layer.confirm('<?php echo $lang['ticket_day_confirm_del']; ?> ', {
            btn: ['<?php echo $lang['nc_yes']; ?>', '<?php echo $lang['nc_no']; ?>']
        }, function (index) {
            $.post('index.php?act=common&op=all_delimg', {img_id: img_id}, function (data) {
                if (data.res) {
                    _this.parent().remove();
                    layer.alert('<?php echo $lang['ticket_day_del_succ']; ?>');
                } else {
                    layer.alert('<?php echo $lang['ticket_day_del_fail']; ?>');
                }
            }, 'json');
        });

    });
</script>
<script type="text/javascript" src="./resource/css/diyUpload/js/webuploader.html5only.min.js"></script>
<script src="./resource/css/diyUpload/js/demo.js"></script>

